<!-- 支付结果页 -->
<template>
	<view class="success-page">
		<shopro-login-modal></shopro-login-modal>
		<view class="success-box u-flex-col u-row-center u-col-center">
			<image class="pay-img" :src="payImg[payState]" mode=""></image>
			<text class="notice">{{ payText[payState] }}</text>
			<text class="pay-money"
				v-if="payState === 'success' && money">￥{{ money }}</text>
			<view class="btn-box u-flex u-row-between">
				<button class="u-reset-button base-btn" 
					@tap="$Router.pushTab('/pages/index/index')">返回首页</button>
				<button class="u-reset-button base-btn u-m-l-10 u-m-r-10"
					@tap="$Router.replace({ path: '/pages/prefile/my-collage/my-collage' })">前往拼团列表</button>
				<button class="u-reset-button again-pay " v-show="payState === 'fail'" @tap="onPay">重新支付</button>
			</view>
		</view>
		<!-- 登录提示 -->
		<!-- <shopro-auth-modal></shopro-auth-modal> -->
		<!-- modal -->
		<!-- #ifdef MP-WEIXIN -->
		<u-modal v-if="payState === 'success'" ref="uModal" v-model="showModal" :show-cancel-button="true"
			confirm-color="#e9b461" cancel-color="#666666" @confirm="onConfirm" confirm-text="订阅消息" cancel-text="取消"
			content="是否订阅消息,追踪订单信息?" title="提示"></u-modal>
		<!-- #endif -->
	</view>
</template>

<script>
	// import Pay from '@/shop/pay';
	import Pay from '@/shop/pay';
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	// import {
	// 	orderRsult
	// } from './../order.js';
	let payTimer = null;
	const payCount = 5;
	export default {
		components: {},
		data() {
			return {
				showModal: false,
				templateIds: [],
				wxOpenTags: '',
				orderDetail: {}, //订单详情
				payText: {
					fail: '支付失败',
					success: '支付成功',
					paying: '查询中...'
				},
				payImg: {
					fail: this.$IMG_URL + '/imgs/order/order_pay_fail.gif',
					success: this.$IMG_URL + '/imgs/order/order_pay_success.gif',
					paying: this.$IMG_URL + '/imgs/order/order_paying.gif'
				},
				payState: 'success', //支付状态
				orderPrams: { // 获取订单支付信息
					ordergroupid: ''
				},
				money: 0,
			};
		},
		computed: {},
		onLoad(options) {
			// success:成功，fail:失败
			this.payState = options.payState;
			// this.$Route.query.orderId && this.getOrderDetail();
			this.money = this.$Route.query.money;
			switch (this.payState) {
				case 'success':
					this.getCartList();
					break;
				case 'fail':
					break;
				case 'paying':
					this.checkTimer();
					break;
				default:
					break;
			}
		},
		onHide() {
			clearInterval(payTimer);
			payTimer = null;
		},
		methods: {
			...mapActions(['getCartList']),

			// 订阅消息
			onConfirm() {
				//  #ifdef MP-WEIXIN
				this.templateIds.length &&
					uni.requestSubscribeMessage({
						tmplIds: this.templateIds,
						success: res => {
							console.log(res);
						},
						fail: err => {
							console.log(err);
						}
					});
				//  #endif
			},

			// 支付订单信息
			getOrderDetail() {
				let that = this;
				// that.$http('order.detail', {
				// 	id: that.$Route.query.orderId
				// }).then(async res => {
				// 	if (res.code === 1) {
				// 		that.orderDetail = res.data;
				// 		if (res.data.status > 0) {
				// 			this.templateIds = await this.$store.dispatch('getMessageIds', this.orderDetail.activity_type == 'groupon' ? 'grouponResult' : 'result');
				// 			this.showModal = this.templateIds.length;
				// 		}
				// 	}
				// });
				// this.orderPrams.ordergroupid =  this.$Route.query.orderId
				// return this.$http.post('order.ordergroupdetails', this.orderPrams).then(res => {
				// 	this.orderDetail = res.data; // 页面展示
				// })
				
			},
			// 支付倒计时
			checkTimer() {
				let that = this;
				let count = 0;
				that.payState = 'paying';
				payTimer = setInterval(() => {
					count++;
					if (count < payCount) {
						that.checkPay();
					} else {
						clearInterval(payTimer);
						that.payState = 'fail';
					}
				}, 800);
			},

			// 检测支付
			async checkPay() {
				// let that = this;
				// let res = await that.$http(
				// 	'order.detail', {
				// 		id: that.$Route.query.orderId
				// 	},
				// 	false
				// );
				
				// if (res.code === 1 && res.data.status > 0) {
				// 	that.payState = 'success';
				// 	clearInterval(payTimer);
				// }
				if (this.orderDetail.status_pay === 100) {
					that.payState = 'success';
					clearInterval(payTimer);
				}
			},

			// 重新支付
			onPay() {
				let that = this;
				let pay = new Pay(that.$Route.query.type, that.orderDetail);
			}
		}
	};
</script>

<style lang="scss" scopeds>
	.success-box {
		background: #fff;
		width: 750rpx;
		padding: 40rpx 0;

		.pay-img {
			width: 130rpx;
			height: 130rpx;
		}

		.notice {
			font-size: 30rpx;

			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			line-height: 30rpx;
			margin-top: 30rpx;
		}

		.pay-money {
			font-size: 36rpx;
			color: #ff3000;
			font-weight: 600;
			margin-top: 20rpx;
		}

		.btn-box {
			margin-top: 30rpx;
			width: 660rpx;

			.base-btn {
				width: 320rpx;
				line-height: 70rpx;
				background: rgba(255, 255, 255, 1);
				border: 1rpx solid rgba(223, 223, 223, 0.5);
				border-radius: 35rpx;
				font-size: 28rpx;

				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				padding: 0;
			}

			.again-pay {
				width: 320rpx;
				line-height: 70rpx;
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				border-radius: 35rpx;
				font-size: 28rpx;

				font-weight: 400;
				color: rgba(255, 255, 255, 0.8);
				padding: 0;
			}
		}
	}

	.hot-box {
		background: #fff;
		padding: 20rpx;
		margin-top: 20rpx;

		.hot-title {
			font-size: 30rpx;

			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			height: 80rpx;
		}
	}
</style>
